﻿@page "/diagram/drawing-tool"

@using Syncfusion.Blazor.Diagrams
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;
@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes

<SampleDescription>
    <p> This sample visualizes how to build a diagram interactively using drawing tools. A continuous draw option, snapping, undo, and redo support are enabled to easily draw diagrams. Rulers, gridlines, and snapping options are enabled to easily align objects.</p>   
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
   <p> This example shows how to draw shapes and connections interactively. In addition to that, rulers, gridlines, and snapping options are enabled to assist drawing. The Tool property can be used to enable drawing. Add <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTools.html#Syncfusion_Blazor_Diagrams_DiagramTools_DrawOnce'>DrawOnce</a> or <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTools.html#Syncfusion_Blazor_Diagrams_DiagramTools_ContinuousDraw'>ContinuousDraw</a> options to the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Tool'>Tool</a> property of the diagram. The <a target='_blank' href='https://help.syncfusion.com/cr/cref_files/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Diagrams.SfDiagram~DrawingObject.html'>DrawingObject</a> property can be used to define a shape or connector to be drawn. A few shape and connector templates are in the palette. To draw basic shapes and connectors, click the templates in the palette. For polygon shapes, a corner or point will be added to the polygon for each mouse left-click. Drawing will be completed either on mouse right-click or double-click.</p>
</ActionDescription>

@*Hidden:Lines*@
<style>
    #diagram {
        display: block;
    }

    .row {
        display: block;
    }

    .image-pattern-style {
        background-color: white;
        background-size: contain;
        background-repeat: no-repeat;
        height: 60px;
        width: calc((100% - 12px) / 3);
        cursor: pointer;
        border: 1px solid #D5D5D5;
        background-position: center;
        float: left;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
    }

    .row-header {
        font-size: 12px;
        font-weight: 500;
    }

    .e-checkbox-wrapper .e-label {
        font-size: 12px;
    }

    .image-pattern-style:hover {
        border-color: gray;
        border-width: 2px;
    }

    .property-panel-header {
        padding-top: 15px;
        padding-bottom: 5px;
    }

    .e-selected-style {
        border-color: #006CE6;
        border-width: 2px;
    }

    .control-section {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 0px;
    }

    .container-fluid {
        padding-left: 0px;
    }

    .col-xs-6 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .sb-property-border {
        border-right: 1px solid #D7D7D7;
    }
</style>
@*End:Hidden*@
<div class="col-lg-8 control-section sb-property-border">
    <div id="diagram-space" class="content-wrapper">
        <SfDiagram ID="diagram1" @ref="@Diagram" Width="100%" Height="540px" DrawingObject="@Drawingobject" Tool="@Tool">
            <DiagramSnapSettings Constraints="SnapConstraints.ShowLines"></DiagramSnapSettings>
            <DiagramRulerSettings ShowRulers="true" DynamicGrid="true"></DiagramRulerSettings>
        </SfDiagram>
    </div>
</div>

@*Hidden:Lines*@
<div class="col-lg-4 property-section">
    <div class="property-panel-header">
        Properties
    </div>
    <div class="row property-panel-content" id="appearance">
        <div class="row row-header" style="padding-top: 10px">
            Shapes
        </div>
        <div class="row" style="padding-top: 8px">
            <div title="Retangle" @onclick="@(() => SelectObjectType("Rectangle"))" class="@CssClass["Rectangle"]" id="shape1" style="background-image: url(images/diagram/drawing-tool/basic-shape/rectangle.png);
        margin-right: 3px">
            </div>
            <div title="Ellipse" @onclick="@(() => SelectObjectType("Ellipse"))" class="@CssClass["Ellipse"]" id="shape2" style="background-image: url(images/diagram/drawing-tool/basic-shape/ellipse.png); margin: 0px 3px">
            </div>
            <div title="Hexagon" @onclick="@(() => SelectObjectType("Hexagon"))" class="@CssClass["Hexagon"]" id="shape3" style="background-image: url(images/diagram/drawing-tool/basic-shape/hexagon.png);">
            </div>
        </div>
        <div class="row" style="padding-top: 8px">
            <div title="Pentagon" @onclick="@(() => SelectObjectType("Pentagon"))" class="@CssClass["Pentagon"]" id="shape4" style="background-image: url(images/diagram/drawing-tool/basic-shape/pentagon.png); margin-right: 3px">
            </div>
            <div title="Polygon" @onclick="@(() => SelectObjectType("Polygon"))" class="@CssClass["Polygon"]" id="shape5" style="background-image: url(images/diagram/drawing-tool/basic-shape/polygon.png); margin: 0px 3px">
            </div>
            <div title="Path" @onclick="@(() => SelectObjectType("Path"))" class="@CssClass["Path"]" id="path" style="background-image: url(images/diagram/drawing-tool/path.png);">
            </div>
        </div>
        <div class="row" style="padding-top: 8px">
            <div title="Image" @onclick="@(() => SelectObjectType("Image"))" class="@CssClass["Image"]" id="image" style="background-image: url(images/diagram/drawing-tool/image.png); margin-right: 3px">
            </div>
            <div title="Text" @onclick="@(() => SelectObjectType("Text"))" class="@CssClass["Text"]" id="text" style="background-image: url(images/diagram/drawing-tool/text.png); margin-right: 3px">
            </div>
        </div>
        <div class="row row-header" style="padding-top: 10px">
            Connector
        </div>
        <div class="row" style="padding-top: 8px">
            <div class="@CssClass["Straight"]" @onclick="@(() => SelectObjectType("Straight"))" id="straight" style="background-image: url(images/diagram/drawing-tool/connector/straight.png); margin-right: 3px">
            </div>
            <div class="@CssClass["Orthogonal"]" @onclick="@(() => SelectObjectType("Orthogonal"))" id="ortho" style="background-image: url(images/diagram/drawing-tool/connector/orthogonal.png); margin: 0px 3px">
            </div>
            <div class="@CssClass["Bezier"]" @onclick="@(() => SelectObjectType("Bezier"))" id="cubic" style="background-image: url(images/diagram/drawing-tool/connector/bezier.png); ">
            </div>
        </div>
        <div class="row" style="padding-top: 10px">
            <SfCheckBox ID="checked" @ref="@CheckBox" Checked="@checkboxvalue" Label="Continuous Draw" ValueChange="@OnChangeData" TChecked="bool" />
        </div>
    </div>
</div>
@*End:Hidden*@

@code
{
    const string defaultCssClass = "image-pattern-style";
    const string selectedCssClass = "image-pattern-style e-selected-style";

    string selectedType = "Rectangle";

    // Reference to diagram
    SfDiagram Diagram;
    SfCheckBox<bool> CheckBox;
    bool checkboxvalue = true;

    public Dictionary<string, string> CssClass { get; set; }

    public object Drawingobject = new DiagramNode() { Shape = new DiagramShape() { Type = DiagramShapes.Basic, BasicShape = BasicShapes.Rectangle } };

    public DiagramTools Tool = DiagramTools.ContinuousDraw;

    protected override void OnInitialized()
    {
        CssClass = new Dictionary<string, string>()
        {
            { "Rectangle", selectedCssClass },
            { "Ellipse", defaultCssClass },
            { "Hexagon", defaultCssClass },
            { "Pentagon", defaultCssClass },
            { "Polygon", defaultCssClass },
            { "Path", defaultCssClass },
            { "Image", defaultCssClass },
            { "Text", defaultCssClass },
            { "Straight", defaultCssClass },
            { "Orthogonal", defaultCssClass },
            { "Bezier", defaultCssClass },
        };
    }

    public void SelectObjectType(string objectType)
    {
        if (objectType == "Rectangle")
        {
            Drawingobject = new DiagramNode() { Shape = new DiagramShape() { Type = DiagramShapes.Basic, BasicShape = BasicShapes.Rectangle } };
        }
        else if (objectType == "Ellipse")
        {
            Drawingobject = new DiagramNode() { Shape = new DiagramShape() { Type = DiagramShapes.Basic, BasicShape = BasicShapes.Ellipse } };
        }
        else if (objectType == "Hexagon")
        {
            Drawingobject = new DiagramNode() { Shape = new DiagramShape() { Type = DiagramShapes.Basic, BasicShape = BasicShapes.Hexagon } };
        }
        else if (objectType == "Pentagon")
        {
            Drawingobject = new DiagramNode() { Shape = new DiagramShape() { Type = DiagramShapes.Basic, BasicShape = BasicShapes.Pentagon } };
        }
        else if (objectType == "Polygon")
        {
            Drawingobject = new DiagramNode() { Shape = new DiagramShape() { Type = DiagramShapes.Basic, BasicShape = BasicShapes.Polygon } };
        }
        else if (objectType == "Path")
        {
            Drawingobject = new DiagramNode()
            {
                Shape = new DiagramShape()
                {
                    Type = DiagramShapes.Path,
                    Data = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643," +
                    "179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z"
                }
            };
        }
        else if (objectType == "Image")
        {
            Drawingobject = new DiagramNode()
            {
                Shape = new DiagramShape()
                {
                    Type = DiagramShapes.Image,
                    Align = ImageAlignment.None,
                    Source = "images/diagram/overview/image16.png"
                }
            };
        }
        else if (objectType == "Text")
        {
            Drawingobject = new DiagramNode() { Shape = new DiagramShape() { Type = DiagramShapes.Text } };
        }
        else if (objectType == "Straight")
        {
            Drawingobject = new DiagramConnector() { Type = Segments.Straight, Constraints = ConnectorConstraints.Default };
        }
        else if (objectType == "Orthogonal")
        {
            Drawingobject = new DiagramConnector() { Type = Segments.Orthogonal, Constraints = ConnectorConstraints.Default };
        }
        else if (objectType == "Bezier")
        {
            Drawingobject = new DiagramConnector() { Type = Segments.Bezier, Constraints = ConnectorConstraints.Default };
        }

        CssClass[selectedType] = defaultCssClass;
        selectedType = objectType;
        CssClass[selectedType] = selectedCssClass;
        Tool = checkboxvalue ? DiagramTools.ContinuousDraw : DiagramTools.DrawOnce;
        StateHasChanged();
    }

    public void OnChangeData(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        checkboxvalue = CheckBox.Checked;
        Tool = (CheckBox.Checked) ? DiagramTools.ContinuousDraw : DiagramTools.DrawOnce;
    }
}
